<template>
  <CommonCard title="累计用户数" value="117,798,6">
    <div ref="totalUsersRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="footer">
        <span>日同比</span>
        <span class="emphasis">17.70%</span>
        <span class="increment"></span>
       
        <span>月同比</span>
        <span class="emphasis">47.12%</span>
        <span class="decrement"></span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue";
export default {
  name: "TotalUsers",
  components: {
    CommonCard,
  },
};
</script>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts'

// 定义一个ref 关联到页面中的ref标签上面
const totalUsersRef = ref()
let chart:EChartsType

const getOption = ()=>{
  return {
    xAxis:{
      min:0,
      max:100,
      show:false,
    },
    yAxis:{
      // 不显示y轴的内容
      show:false,
      data:['数据']
    },
    // 图片再坐标中显示的位置
    grid:{
    left:0,
    right:0,
    },
    // 鼠标放上去有提示
    tooltip:{
    trigger:'axis',
    confine:true
    },
    series:[
      {
        type: 'bar',
        data: [44],
        // 设置柱条的宽度
        barWidth:10,
        // 显示柱条的背景颜色
        showBackground:true,
        itemStyle:{
          color:'yellowgreen'
        },
        // 设置刻度样式
        label:{
          show:true,
          // 把文字成数线
          formatter:" | ",
          color:'yellowgreen',
          position:'right'
        }
      },
    ],

  }
}

onMounted(()=>{
  chart = echarts.init(totalUsersRef.value)
  chart.setOption(getOption())

  window.addEventListener('resize',()=>{
    chart && chart.resize
  })
})

</script>


<style lang='scss' scoped>
.footer {
  display: flex;
  align-items: center;
}
</style>